// 路由基本使用
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'

class Edu extends React.Component {
  render() {
    return <div>教育</div>
  }
}

class Tech extends React.Component {
  render() {
    return <div>科技</div>
  }
}

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div>router-v6-基本使用</div>
          <hr />
          {/* 路由链接 */}
          <Link to="/edu">教育</Link>
          <Link to="/tech">科技</Link>

          {/* 路由映射，路由填充位 */}
          <Routes>
            <Route path="/edu" element={<Edu />} />
            <Route path="/tech" element={<Tech />} />
          </Routes>
        </div>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
